<template>
  <div>
    <div class="myOrder">
      <div class="myOrder-title">我的订单</div>
      <div class="myOrder-table">
        <ul>
          <li
            :class="{ con: myOrderTable == '全部订单' }"
            @click="myOrderTable = '全部订单'"
          >
            <p>全部订单</p>
          </li>
          <li
            :class="{ con: myOrderTable == '待支付' }"
            @click="myOrderTable = '待支付'"
          >
            <p>待支付</p>
          </li>
          <li
            :class="{ con: myOrderTable == '待发货' }"
            @click="myOrderTable = '待发货'"
          >
            <p>待发货</p>
          </li>
          <li
            :class="{ con: myOrderTable == '待收货' }"
            @click="myOrderTable = '待收货'"
          >
            <p>待收货</p>
          </li>
          <li
            :class="{ con: myOrderTable == '已完成' }"
            @click="myOrderTable = '已完成'"
          >
            <p>已完成</p>
          </li>
        </ul>
      </div>
      <div class="myOrder-tableSon">
        <ul>
          <li v-for="(item, index) in dindanTab" :key="index">
            <div class="tableSon-header">
              <div class="header-xinxi">
                <div class="times">{{ item.dindantou.times }}</div>
                <div class="names">{{ item.dindantou.shoujianr }}</div>
                <div class="0ddNumbers">
                  订单号：{{ item.dindantou.danghao }}
                </div>
              </div>
              <div class="zhuangtai">
                {{ item.dindantou.state }}
              </div>
            </div>

            <div
              class="tableson-commodity"
              v-for="(k, i) in item.dindannei"
              :key="i"
            >
              <div class="commodity-son">
                <div class="img">
                  <img :src="k.imageUrl" alt="" />
                </div>
                <div class="miaoshu">
                  <p>{{ k.name }} {{ k.text }}</p>
                  <p>{{ k.color }}</p>
                  <span>{{ k.activity }}</span>
                </div>
                <div class="jiage">
                  <p>￥ {{ k.originalPrice }}.00</p>
                  <p>x{{ k.nums }}</p>
                </div>
              </div>
            </div>
            <div class="ddxiangqing">
              <button v-if="item.dindantou.state!='已取消'" @click="toOrderDetails(index)">订单详情</button>
            </div>
            <div class="shouhuo">
              <button
                v-if="item.dindantou.state == '待收货'"
                @click="shouhuo(index)"
              >
                确定收货
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dindanList: [],
      myOrderTable: "全部订单",
    };
  },
  methods: {
    shouhuo(index) {
      console.log(index);
      this.dindanList[index].dindantou.state = "已完成";
      window.localStorage.setItem(
        "dindanList",
        JSON.stringify(this.dindanList)
      );
    },

    toOrderDetails(index){
      this.$emit("toOrderDetails",index)
    }
  },
  computed: {
    dindanTab() {
      return this.dindanList.filter((item) => {
        if (this.myOrderTable != "全部订单") {
          return item.dindantou.state == this.myOrderTable;
        } else {
          return true;
        }
      });
    },
  },
  created() {
    if (localStorage.dindanList) {
      this.dindanList = JSON.parse(window.localStorage.getItem("dindanList"));
    } else {
      this.dindanList = [];
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/myOrder.scss";
</style>